page {
  height: 100%;
}
.luckyTurntable {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-image: url('http://resource.160nurse.com/canvas/healthy/img/activity/bg_1.png');
}
.luckyTurntable .top {
  width: 100%;
  height: 50vw;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/title_0.png');
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding-top: 32vw;
  line-height: 6vw;
  text-align: center;
  font-size: 4vw;
  color: #fff;
}
.luckyTurntable .top .b {
  color: #FB5053;
}
.luckyTurntable .turntable {
  width: 88vw;
  height: 88vw;
  margin: -5vw 6vw 0 6vw;
  position: relative;
  box-sizing: border-box;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/qiang_1.png');
  background-size: 100% 100%;
}
.luckyTurntable .turntable.on {
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/qiang_0.png');
}
.luckyTurntable .turntable .box {
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 100%;
}
.luckyTurntable .turntable .box > view {
  position: absolute;
  z-index: 5;
  width: 9vw;
  height: 11vw;
}
.luckyTurntable .turntable .box > view .title {
  position: absolute;
  line-height: 3.6vw;
  top: -5vw;
  font-size: 3.6vw;
  text-align: center;
  width: 20vw;
  transform: translateX(-28%);
}
.luckyTurntable .turntable .box > view image {
  width: 9vw;
  height: 11vw;
}
.luckyTurntable .turntable .box > view:first-of-type {
  top: 26%;
  right: 37%;
  transform: rotate(26deg);
  color: #ff4081;
}
.luckyTurntable .turntable .box > view:nth-child(2) {
  top: 37%;
  right: 28%;
  transform: rotate(68deg);
  color: #ff4081;
}
.luckyTurntable .turntable .box > view:nth-child(3) {
  bottom: 37%;
  right: 28%;
  transform: rotate(115deg);
  color: #fff;
}
.luckyTurntable .turntable .box > view:nth-child(4) {
  bottom: 27%;
  right: 38%;
  transform: rotate(158deg);
  color: #ff4081;
}
.luckyTurntable .turntable .box > view:nth-child(5) {
  bottom: 28%;
  left: 38%;
  transform: rotate(206deg);
  color: #ff4081;
}
.luckyTurntable .turntable .box > view:nth-child(6) {
  bottom: 37%;
  left: 27%;
  transform: rotate(-110deg);
  color: #ff4081;
}
.luckyTurntable .turntable .box > view:nth-child(7) {
  top: 37%;
  left: 27%;
  transform: rotate(-70deg);
  color: #fff;
}
.luckyTurntable .turntable .box > view:nth-of-type(8) {
  top: 25%;
  left: 37%;
  transform: rotate(-26deg);
  color: #ff4081;
}
.luckyTurntable .turntable .turn {
  position: absolute;
  width: 73%;
  height: 73%;
  margin: 0;
  z-index: 2;
  top: 13.5%;
  left: 13.5%;
}
.luckyTurntable .arrow {
  position: absolute;
  width: 10vw;
  height: 13.9vw;
  top: 70vw;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%);
}
.luckyTurntable .go {
  position: absolute;
  width: 25vw;
  height: 25vw;
  top: 75.5vw;
  left: 50%;
  margin-left: -12.5vw;
  z-index: 9;
  animation: fang_da2 1s linear 0s infinite ;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/go_1.png');
  background-size: 100% 100%;
}
.luckyTurntable .go.off {
  animation-play-state: paused;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/go_2.png');
}
.luckyTurntable .rules {
  position: absolute;
  bottom: 5vw;
  color: #fff;
  font-size: 3vw;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}
.luckyTurntable .rules image {
  width: 1.5vw;
  vertical-align: middle;
}
.luckyTurntable .decorate.off view,
.luckyTurntable .decorate.off text {
  animation-play-state: paused;
}
.luckyTurntable .decorate > view {
  position: absolute;
  z-index: 99;
  bottom: 110vh;
}
.luckyTurntable .decorate > view text {
  background-size: 100% 100%;
  display: block;
  width: 100%;
  height: 100%;
}
.luckyTurntable .decorate .piao_1 {
  animation: piao_1 6s linear 0s 1;
}
.luckyTurntable .decorate .piao_2 {
  animation: piao_2 6s linear 0s 1;
}
.luckyTurntable .decorate .piao_3 {
  animation: piao_3 6s linear 0.2s 1;
}
.luckyTurntable .decorate .piao_4 {
  animation: piao_4 6s linear 0.2s 1;
}
.luckyTurntable .decorate .piao_5 {
  animation: piao_3 6s linear 0.6s 1;
}
.luckyTurntable .decorate .piao_6 {
  animation: piao_4 6s linear 0.6s 1;
}
.luckyTurntable .decorate .piao_7 {
  animation: piao_3 6s linear 1s 1;
}
.luckyTurntable .decorate .piao_8 {
  animation: piao_4 6s linear 1s 1;
}
.luckyTurntable .decorate .piao_10 {
  animation: piao_5 6s linear 0s infinite;
}
.luckyTurntable .decorate .piao_11 {
  animation: piao_6 6s linear 0s infinite;
}
.luckyTurntable .decorate .img1 text {
  width: 7vw;
  height: 10vw;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/tp_1.png');
}
.luckyTurntable .decorate .img2 text {
  width: 9vw;
  height: 4.88vw;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/tp_2.png');
}
.luckyTurntable .decorate .img3 text {
  width: 7vw;
  height: 4.5vw;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/tp_3.png');
}
.luckyTurntable .decorate .img4 text {
  width: 7vw;
  height: 7.3vw;
  background-image: url('//resource.160nurse.com/canvas/healthy/img/activity/tp_4.png');
}
.luckyTurntable .decorate .left1 {
  left: 15vw;
}
.luckyTurntable .decorate .left2 {
  left: 35vw;
}
.luckyTurntable .decorate .left3 {
  left: 55vw;
}
.luckyTurntable .decorate .left4 {
  left: 75vw;
}
.luckyTurntable .decorate .left5 {
  left: 5vw;
}
.luckyTurntable .decorate .left6 {
  left: 40vw;
}
.luckyTurntable .decorate .left7 {
  left: 65vw;
}
.luckyTurntable .tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  bottom: 12vw;
  border-radius: 2vw;
  border: 1px solid #f5f5f5;
  background-color: #E2D0EC;
  width: 70vw;
}
.luckyTurntable .tip image {
  float: left;
  width: 25vw;
  height: 17vw;
  vertical-align: middle;
}
.luckyTurntable .tip .text {
  padding-top: 3vw;
  display: inline-block;
  overflow: hidden;
  padding-left: 5vw;
}
.luckyTurntable .tip .text .detail {
  font-size: 3.6vw;
}
.luckyTurntable .tip .text .detail > text {
  color: #ff3f4c;
}
.luckyTurntable .tip .text .tips {
  margin-top: 1vw;
  font-size: 3vw;
}
.shadowBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.shadowBox .luckyInfo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.shadowBox .luckyInfo .fd {
  position: absolute;
  background-color: #fff;
  border-radius: 3vw;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 40vw;
  margin: auto;
  width: 70vw;
  padding-bottom: 5vw;
  transform: scale(0, 0);
}
.shadowBox .luckyInfo .fd.on {
  transform: scale(1, 1);
}
.shadowBox .luckyInfo .fd image {
  width: 100%;
  height: 24vw;
}
.shadowBox .luckyInfo .fd .detail {
  font-size: 3.6vw;
  text-align: center;
  line-height: 15vw;
}
.shadowBox .luckyInfo .fd .detail .num {
  color: #ff3f4c;
  width: 15vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shadowBox .luckyInfo .fd button {
  width: 40vw;
  line-height: 10vw;
  background-color: #00D2C3;
  border-radius: 5vw;
  color: #fff;
  font-size: 4vw;
}
.shadowBox .luckyInfo .getPrize {
  font-size: 3.6vw;
}
.shadowBox .ruleInfo {
  position: absolute;
  background-color: #fff;
  border-radius: 3vw;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 45vw;
  margin: auto;
  width: 70vw;
  padding: 8vw 5vw;
}
.shadowBox .ruleInfo view:nth-child(1) {
  font-size: 4.2vw;
  font-weight: 700;
}
.shadowBox .ruleInfo view:nth-child(2) {
  font-size: 3.6vw;
  margin-top: 6vw;
}
.shadowBox .ruleInfo view:nth-child(3) {
  font-size: 3.6vw;
  margin-top: 6vw;
}
.shadowBox .ruleInfo view:nth-child(4) {
  font-size: 3.6vw;
  margin-top: 6vw;
}
.shadowBox .exchange {
  position: absolute;
  background-color: #fff;
  border-radius: 3vw;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 45vw;
  margin: auto;
  width: 70vw;
  padding: 5vw 5vw;
}
.shadowBox .exchange .title {
  font-size: 4vw;
  color: #999999;
  text-align: center;
  margin-bottom: 8vw;
}
.shadowBox .exchange .detail {
  display: flex;
  justify-content: space-between;
}
.shadowBox .exchange .detail .rect {
  width: 21vw;
  height: 21vw;
  background-color: #FFB000;
  border-radius: 2vw;
  color: #fff;
  overflow: hidden;
}
.shadowBox .exchange .detail .rect.bg {
  background-color: #FF6444;
}
.shadowBox .exchange .detail .rect .top {
  font-size: 6vw;
  margin: 3vw 0 3vw 8vw;
}
.shadowBox .exchange .detail .rect .top .num {
  font-size: 3.73vw;
}
.shadowBox .exchange .detail .rect .coin {
  font-size: 3.73vw;
  text-align: center;
}
.shadowBox .exchange .detail .rect:nth-child(2) .top {
  margin-left: 7vw;
}
.shadowBox .exchange .detail .rect:nth-child(3) .top {
  margin-left: 6vw;
}
.shadowBox .exchange .click {
  width: 45vw;
  background-color: #00D2C3;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  line-height: 12vw;
  font-size: 3.73vw;
  border-radius: 12vw;
  margin-top: 8vw;
}
